<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__orders">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getPicklistFn()">
							<el-row>
								<el-col  :span="4">
									<el-form-item>
										<el-input v-model="dataForm.tray"  size="small"  placeholder="箱号" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col  :span="2">
									<el-form-item>
										<el-button   size="small"  @click="getPicklistFn()">查询</el-button>
									</el-form-item>
								</el-col>
								<el-col  :span="2">
									<el-form-item>
										<el-button  size="small"  type="primary" @click="savePicklistFn()">分拣</el-button>
									</el-form-item>
								</el-col>
								<el-col  :span="2">
									<el-form-item>
										<el-button  size="small"  type="primary" @click="backToStereoFn()">回库</el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<el-tabs v-model="activeName">
							<el-tab-pane label="拣货明细" name="first">
								<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
									<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
									<el-table-column prop="id" label="序号" header-align="center" align="center"></el-table-column> -->
									<el-table-column prop="orderkey" label="出库单号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="line" label="明细行号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="linelist" label="明细记录行号" header-align="center"
										align="center">
									</el-table-column>
									<el-table-column prop="sku" label="物料编码" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="descr" label="物料编码" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="unit" label="单位" header-align="center" align="center">
									</el-table-column>
									<!-- <el-table-column prop="pack" label="包装" header-align="center" align="center">
									</el-table-column> -->
									<!-- <el-table-column prop="status" label="状态" header-align="center" align="center">
									</el-table-column> -->
									<el-table-column prop="statusstr" label="状态" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="inventoryqty" label="库存量" header-align="center"
										align="center">
									</el-table-column>
									<el-table-column prop="qty" label="数量" header-align="center" align="center">
									</el-table-column>

									<!-- <el-table-column prop="fromloc" label="自库位" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="fromtray" label="自托盘" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="frombox" label="自容器" header-align="center" align="center">
									</el-table-column> -->
									<el-table-column prop="loc" label="当前库位" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="tray" label="当前箱" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="boxstr" label="当前格" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="toloc" label="至库位" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="totray" label="至箱" header-align="center" align="center"
										width="135">
										<template #default="scope">
											<el-input v-model="scope.row.totray" v-bind:disabled="scope.row.status>=13">
											</el-input>
										</template>
									</el-table-column>

									<el-table-column prop="tobox" label="至格" header-align="center" align="center">
										<template #default="scope">
											<!-- <el-input v-model="scope.row.toboxstr" v-bind:disabled="scope.row.status>=5"></el-input> -->
											<!-- <el-select v-model="scope.row.tobox" placeholder="请选择"
												v-bind:disabled="scope.row.status>=13">
												<el-option v-for="item in boxs" :key="item.list" :label="item.listname"
													:value="item.list">
												</el-option>
											</el-select> -->
											<select v-model="scope.row.tobox" v-bind:disabled="scope.row.status>=13">
												<option v-for="item in boxs" v-bind:value="item.list">
													{{ item.listname }}
												</option>
											</select>
										</template>
									</el-table-column>
									<el-table-column prop="actqty" label="拣货数量" header-align="center" align="center">
										<template #default="scope">
											<el-input v-model="scope.row.actqty" v-bind:disabled="scope.row.status>=13">
											</el-input>
										</template>
									</el-table-column>
									<el-table-column prop="uniquecodes" label="唯一码" header-align="center"
										align="center">
										<template #default="scope">
											<el-button @click="showDialog(scope.row)" v-if="scope.row.isuniquecode==1"
												v-bind:disabled="scope.row.status>=13"> 录入唯一码</el-button>
										</template>
									</el-table-column>
									<el-table-column type="expand" fixed="right" label="详情">
										<template #default="props">
											<el-form label-position="left" inline class="demo-table-expand">
												<!-- <el-table-column prop="lot" label="批号" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot1" label="生产日期" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot2" label="有效日期" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot3" label="属性3" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot4" label="属性4" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot5" label="属性5" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot6" label="属性6" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot7" label="属性7" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot8" label="属性8" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot9" label="属性9" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="lot10" label="属性10" header-align="center" align="center">
													</el-table-column>
													<el-table-column prop="remark" label="备注" header-align="center" align="center">
													</el-table-column> -->

												<el-row>
													<el-col :span="4">
														<el-form-item label="批号:">
															<span>{{ props.row.lot }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="生产日期:">
															<span>{{ props.row.lot1 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="有效日期:">
															<span>{{ props.row.lot2 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="是否加长:">
															<span>{{ props.row.lot3 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="价格:">
															<span>{{ props.row.lot4 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="部门/供应商:">
															<span>{{ props.row.lot5 }}</span>
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="4">
														<el-form-item label="计划单号/工序号:">
															<span>{{ props.row.lot6 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="主制车间:">
															<span>{{ props.row.lot7 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="任务编码:">
															<span>{{ props.row.lot8 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="新旧:">
															<span>{{ props.row.lot9 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="作废:">
															<span>{{ props.row.lot10 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="炉批号:">
															<span>{{ props.row.lot11 }}</span>
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="4">
														<el-form-item label="炉批号:">
															<span>{{ props.row.lot11 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="材料复验号:">
															<span>{{ props.row.lot12 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="牌号:">
															<span>{{ props.row.lot13 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="属性14:">
															<span>{{ props.row.lot14 }}</span>
														</el-form-item>
													</el-col>
													<el-col :span="4">
														<el-form-item label="属性15:">
															<span>{{ props.row.lot15 }}</span>
														</el-form-item>
													</el-col>

												</el-row>
											</el-form>
										</template>
									</el-table-column>


									<!-- <el-table-column prop="backstatus" label="回传状态" header-align="center" align="center"></el-table-column>
									<el-table-column prop="backdate" label="回传时间" header-align="center" align="center"></el-table-column>
									<el-table-column prop="backresult" label="回传结果" header-align="center" align="center"></el-table-column>
									<el-table-column prop="backcode" label="回传码" header-align="center" align="center"></el-table-column>
									<el-table-column prop="warehouse" label="仓库" header-align="center" align="center"></el-table-column>
									<el-table-column prop="pickuser" label="拣货人" header-align="center" align="center"></el-table-column>
									<el-table-column prop="picktime" label="拣货时间" header-align="center" align="center"></el-table-column>
									<el-table-column prop="checkuser" label="复核人" header-align="center" align="center"></el-table-column>
									<el-table-column prop="checktime" label="复核时间" header-align="center" align="center"></el-table-column>
									<el-table-column prop="loader" label="装车人" header-align="center" align="center"></el-table-column>
									<el-table-column prop="loadtime" label="装车时间" header-align="center" align="center"></el-table-column>
									<el-table-column prop="adduser" label="创建人" header-align="center" align="center"></el-table-column>
									<el-table-column prop="addtime" label="创建时间" header-align="center" align="center"></el-table-column>
									<el-table-column prop="updatuser" label="修改人" header-align="center" align="center"></el-table-column>
									<el-table-column prop="updatetime" label="修改时间" header-align="center" align="center"></el-table-column> -->
									<!-- <el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
										<template #default="scope">
											<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
											<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
										</template>
									</el-table-column> -->
								</el-table>
							</el-tab-pane>
							<el-tab-pane label="库存记录" name="second">
								<el-table v-loading="dataListLoading" :data="inventoryDataList" border
									style="width: 100%;" height="720">
									<el-table-column prop="sku" label="物料编码" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="descr" label="物料名称" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="location" label="库位编码" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="tray" label="箱" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="boxstr" label="格" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot" label="批号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="qty" label="数量" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="pickqty" label="分配量" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="putqty" label="待上架量" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot1" label="生产日期" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot2" label="有效日期" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot3str" label="是否加长" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot4" label="价格" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot5" label="部门/供应商" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot6" label="计划单号/工序号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot7" label="主制车间" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot8" label="任务编码" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot9str" label="新旧" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot10str" label="作废" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot11" label="炉批号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot12" label="材料复验号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot13" label="牌号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot14" label="属性14" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="lot15" label="属性15" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="status" label="状态" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="remark" label="备注" header-align="center" align="center">
									</el-table-column>
									<!-- <el-table-column prop="adduser" label="创建人" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="addtime" label="创建时间" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="updatuser" label="更新人" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center">
									</el-table-column> -->
								</el-table>
							</el-tab-pane>
						</el-tabs>


						<!-- <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
							layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
							@current-change="pageCurrentChangeHandle">
						</el-pagination> -->
						<!-- 弹窗, 新增 / 修改 -->
						<!-- <ordersAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList">
						</ordersAddOrUpdate> -->
						<!-- 明细 -->
						<!-- <orderdetail v-if="orderdetailVisible" ref="orderdetailvue"></orderdetail> -->
					</div>
				</el-card>
				<el-dialog v-model="dialogFormVisible" ref="dalogRef">
					<el-form :v-model="formdata">
						<el-form-item label="唯一码">
							<el-input v-model="formdata.uniquecodes" placeholder="唯一码" type="textarea" rows="5"
								@change="duplicateRemoval">
							</el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<span class="dialog-footer">
							<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
							<el-button size="small" type="primary" @click="subClick">确 定</el-button>
						</span>
					</template>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';

	import {
		getPicklist,
		savePicklist,
		backToStereo,
	} from '@/network/lswms/orders/Orderdetaillist'

	import {
		getInventoryListByData
	} from '@/network/lswms/stock/Inventory'
	import {
		getCodeListByCode,
	} from "@/network/lswms/base/Codelist.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	export default {
		name: "orderdetaillist",
		// props:{
		// 	dataForm:{
		// 		type:Object
		// 	}
		// },
		// 	components: {
		// 		orderdetaillistAddOrUpdate,
		// 	},

		setup(props) {
			const dataForm = ref({
				tray: ''
			})

			const activeName = ref('first')

			const dataList = ref(null)

			const inventoryDataList = ref(null)

			const dataListLoading = ref(false)

			const getPicklistFn = () => {
				if (dataForm.value.tray.trim() == '' || dataForm.value.tray == null || dataForm.value.tray.trim()
					.length == 0) {
					return ElMessage.error("请录入箱号");
				}

				getPicklist(dataForm.value.tray).then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					dataList.value = res.data;
                    dataList.value.forEach(function(item) {
                        item.totray = 'S000000002';
                        item.tobox = 'B01';
                    });

				})

				getInventoryListByData({
					tray: dataForm.value.tray
				}).then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					inventoryDataList.value = res.data;
				})
				boxsFn();
			}

			const buttonDisable = computed((data) => {
				if (data < 5) {
					return false
				} else {
					return true
				}
			})

			//是否回库
			//	const backToStereo = ref(true);

			const savePicklistFn = () => {
				ElMessageBox.confirm('确定要按更改的记录分拣吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					// let data = {
					// 	backToStereo: backToStereo.value,
					// 	list: dataList.value
					// }

					savePicklist(dataList.value).then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getPicklistFn();
							}
						});

					})
				}).catch(function() {})

			}

			const boxs = ref("");

			const boxsFn = () => {

				getCodeListByCode('BOXLIST').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					boxs.value = res.data;
				}).catch((err) => {});
			}

			const backToStereoFn = () => {
				if (dataForm.value.tray.trim() == '' || dataForm.value.tray == null || dataForm.value.tray.trim()
					.length == 0) {
					return ElMessage.error("请录入箱号");
				}
				ElMessageBox.confirm('确定将此箱回库吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					let data = dataForm.value;
					backToStereo(data).then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getPicklistFn();
							}
						});

					})
				}).catch(function() {})

			}

			const formdata = ref({
				name: '',
				name2: '',
				uniquecodes: ''
			})
			const dalogRef = ref();

			const dialogFormVisible = ref(false);
			const showDialog = (row) => {

				dialogFormVisible.value = true;
				formdata.value = row;
			}
			const subClick = () => {
				dialogFormVisible.value = false;
			}

			const duplicateRemoval = () => {
				let uniquecodes = formdata.value.uniquecodes.split('\n')
				let newArr = Array.from(new Set(uniquecodes));

				if (newArr.length > 0) {
					formdata.value.uniquecodes = newArr.join("\n");
				} else {
					formdata.value.uniquecodes = [];
				}
			}


			return {
				dialogFormVisible,
				dalogRef,
				showDialog,
				subClick,
				formdata,
				activeName,
				dataForm,
				getPicklistFn,
				dataList,
				inventoryDataList,
				dataListLoading,
				//backToStereo,
				savePicklistFn,
				backToStereoFn,
				buttonDisable,
				boxs,
				duplicateRemoval
			}
		},
		// methods:{
		// 	hasPermission
		// }
	}
</script>

<style>
</style>
